<template>
  <div class="task-tab">
    <div
      class="task-tab-item"
      v-for="(tab, index) in props.data"
      :key="index"
      :class="tab.name === activeName ? 'tab-active' : ''"
      @click="handleTabClick(tab.name, $event)">
      {{ tab.label || tab.name }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: [String, Number],
  data: {
    type: Array,
    default: () => [],
  },
})

const value = ref(props.data[0]?.name)

const activeName = computed({
  get() {
    return props.modelValue || value.value
  },
  set(v) {
    value.value = v
    emit('update:modelValue', v)
  },
})

const emit = defineEmits(['tabClick', 'update:modelValue', 'tabChange'])

function handleTabClick(name, e) {
  activeName.value = name
  emit('tabChange', name)
  emit('tabClick', name, e)
}
</script>

<style scoped lang="scss">
.task-tab {
  @include use-flex(center);
  .task-tab-item {
    position: relative;
    cursor: pointer;
    text-align: center;
    margin-right: 30px;
    user-select: none;
    color: var(--elp-color-info);
  }
  .tab-active {
    color: var(--elp-color-text);
    &:after {
      content: '';
      position: absolute;
      height: 3px;
      width: 100%;
      left: 50%;
      transform: translateX(-50%);
      bottom: -7px;
      border-radius: 3px;
      background-color: var(--elp-color-primary);
      animation: tab-active-animation 0.3s;
    }
  }
  @keyframes tab-active-animation {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
}
</style>
